<template>
  <div>
    <h3>孙子组件</h3>
    <p>{{ toGrand }}</p>
  </div>
</template>

<script setup lang="ts">
// 父组件中通过provide 传递数据 在子组件中使用 inject来接收
// ----------------------------在子组件中使用:
// inject 是一个在子组件中调用的方法，用于从父组件中接收通过 provide 提供的数据
// 它接收一个数组或对象作为参数，用来指定希望注入的数据属性。
// 如果以数组形式提供,那么 inject 将会搜索对应 provided 的键,如果找到,就将对应的值赋给子组件的相应属性;
// 如果指定一个默认值，如果不在 provide 中找到对应的键，则使用默认值。
// 如果以对象形式提供，inject 会将提供的键和子组件的属性进行映射。这允许子组件在使用时使用不同的属性名

import { inject } from 'vue'
// 获取不到祖先的数据
const toGrand = inject('toGrandKey', '孙子组件默认值')
console.log(toGrand)
</script>
